---
title: Gridsome에서 마이그레이션
description: 기존 Gridsome 프로젝트를 Astro로 마이그레이션하기 위한 팁
type: migration
stub: true
framework: Gridsome
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Gridsome](https://gridsome.org)은 Vue 및 GraphQL을 기반으로 구축된 오픈 소스 정적 사이트 생성기입니다.

## Gridsome과 Astro의 주요 유사점

Gridsome과 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- Gridsome과 Astro는 모두 유사한 [프로젝트 파일 구조](/ko/basics/project-structure/#디렉터리-및-파일)를 가진 최신 Javascript 정적 사이트 생성기입니다.

- Gridsome과 Astro는 모두 프로젝트 파일에 `src/` 폴더를 사용하고 [파일 기반 라우팅을 위한 특수 `src/pages/` 폴더](/ko/basics/astro-pages/)를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.

- Astro에는 [Vue 컴포넌트 사용을 위한 공식 통합](/ko/guides/integrations-guide/vue/)이 있으며 Vue를 위한 여러 가지를 포함하여 [NPM 패키지 설치](/ko/guides/imports/#npm-패키지)를 지원합니다. Vue UI 컴포넌트를 작성할 수 있으며 기존 Gridsome Vue 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수 있습니다.

- Astro와 Gridsome 모두 [데이터용 헤드리스 CMS, API 또는 Markdown 파일](/ko/guides/data-fetching/)을 사용할 수 있습니다. 선호하는 [콘텐츠 작성](/ko/guides/content/) 시스템을 계속 사용할 수 있으며 기존 콘텐츠를 유지할 수 있습니다.

## Gridsome과 Astro의 주요 차이점

Astro에서 Gridsome 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다.

- Gridsome은 Vue 기반 단일 페이지 애플리케이션 (SPA)입니다. Astro 사이트는 [`.astro` 컴포넌트](/ko/basics/astro-components/)를 사용하여 구축된 다중 페이지 앱이지만 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit를 포함하여](/ko/guides/framework-components/) 원시 HTML 템플릿도 지원합니다.

- SPA로서 Gridsome은 SPA 라우팅을 위해 `vue-router`를 사용하고 `<head>`를 관리하기 위해 `vue-meta`를 사용합니다. Astro에서는 별도의 HTML 페이지를 생성하고 `<head>` 페이지를 직접 또는 [레이아웃 컴포넌트](/ko/basics/layouts/)에서 제어합니다.

- [로컬 파일 데이터](/ko/guides/imports/): Gridsome은 GraphQL을 사용하여 프로젝트 파일에서 데이터를 검색합니다. Astro는 ESM imports 및 [`Astro.glob()`](/ko/guides/imports/#astroglob) 도우미를 사용하여 로컬 프로젝트 파일에서 데이터를 가져옵니다. 표준 `fetch()` API를 사용하여 원격 리소스를 로드할 수도 있습니다. GraphQL은 선택적으로 프로젝트에 추가될 수 있지만 기본적으로 포함되지는 않습니다.

## Gridsome에서 Astro로 전환

Gridsome 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 [테마 쇼케이스](https://astro.build/themes/)에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 `--template` 인수를 `create astro` 명령에 전달할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install/auto/#시작-템플릿)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

[Markdown 또는 MDX 페이지를 생성](/ko/guides/markdown-content/)하기 위해 기존 Markdown (또는 선택적 통합이 포함된 MDX) 파일을 콘텐츠로 가져오세요.

Gridsome의 프로젝트 구조는 Astro의 프로젝트 구조와 유사하므로 프로젝트의 여러 기존 파일을 새 Astro 프로젝트의 동일한 위치에 복사할 수 있습니다. 그러나 두 프로젝트 구조는 동일하지 않습니다. [Astro의 프로젝트 구조](/ko/basics/project-structure/)를 검토하여 차이점이 무엇인지 확인해 보세요.

Astro는 Gridsome과 다르게 로컬 파일을 쿼리하고 가져오기 때문에 [`Astro.glob()`을 사용하여 파일을 로드하는 방법](/ko/guides/imports/#astroglob)을 읽고 로컬 파일 작업 방법을 이해하는 것이 좋습니다.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 [astro.new](https://astro.new)에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 자료

- 블로그 게시물: [Gridsome에서 Astro로 마이그레이션](https://fyodor.io/migration-from-gridsome-to-astro/).
